<!-- 注册流程 -->
<template>
  <div class="context_box">
    <div class="logo img">
      <img src="@/assets/img/index_icon2.png" alt />
    </div>
    <div class="reg_middle">
      <div class="reg_middle_in" v-for="(item, i) in inputArr" :key="i">
        <div class="reg_middle_in_title">
          <!-- <span class="cnicered">*{{item.placeholder}}</span> -->
        </div>
        <div class="reg_middle_in_input sbFlex bm">
          <div class="reg_middle_in_input_l">{{ item.lable }}</div>
          <div class="reg_middle_in_input_r flex" @click="showSelectPage(item)">
            <input
              :type="item.type || 'text'"
              :disabled="item.btn"
              :placeholder="item.placeholder"
              v-model="item.value"
              required
            />
            <div class="icon cenFlex" v-if="item.btn">
              <van-icon name="play" size="20px" />
            </div>
          </div>
        </div>
      </div>
      <div class="reg_middle_img">
        <div class="reg_middle_img_title">学生证信息</div>
        <div class="reg_middle_img_updata flex">
          <div
            class="reg_middle_img_updata_in"
            v-for="(item, i) in imgArr"
            :key="i"
          >
            <images
              :url="item.content"
              @show="imagePreviewFn(i)"
              @delete="delImg(i)"
            ></images>
          </div>
          <div
            class="reg_middle_img_updata_in img"
            v-if="9 - imgArr.length > 0"
          >
            <imgUpdate
              :limit="9 - imgArr.length"
              @on-success="beforeRead"
              multiple
            ></imgUpdate>
          </div>
        </div>
        <div class="reg_middle_img_subtitle">
          <span>*支持jpg .jpeg .bmp .gif .png格式照片，大小不超过8M</span>
        </div>
      </div>
      <div class="reg_middle_img">
        <div class="reg_middle_img_title">社团干部经历</div>
        <div class="reg_middle_bottom obox">
          <textarea
            placeholder="请输入您的在校经历"
            v-model="experienceValue"
          ></textarea>
        </div>
      </div>
      <div class="all_btn cenFlex reg_middle_btn btnR" @click="regEnd">
        完成注册
      </div>
    </div>
    <selectPage
      v-if="selectPageShow"
      @hide="selectPageShow = false"
      :apiType="apiType"
      @editSearch="editSearch"
    ></selectPage>
  </div>
</template>

<script>
import api from "@/api/login";
import { Toast } from "vant";

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
    selectPage: (resolve) =>
      require(["@/views/login/select-page.vue"], resolve),
    imgUpdate: (resolve) => require(["@/components/imgUpdate.vue"], resolve),
    images: (resolve) => require(["@/components/images.vue"], resolve),
  },
  data() {
    //这里存放数据
    return {
      selectPageShow: false,
      inputArr: [
        {
          lable: "姓名",
          placeholder: "请输入您的姓名",
          key: "username",
          value: "",
          btn: false,
        },
        {
          lable: "联系电话",
          placeholder: "请输入您的电话号码",
          key: "mobile",
          value: "",
          btn: false,
          type: "number",
        },
        {
          lable: "居住城市",
          placeholder: "请选择您的居住城市",
          key: "city",
          value: "",
          btn: true,
        },
        {
          lable: "就读学校",
          placeholder: "请选择您的就读学校",
          key: "school",
          value: "",
          btn: true,
        },
        {
          lable: "就读年级",
          placeholder: "请选择您的就读年级",
          key: "grade",
          value: "",
          btn: false,
        },
        {
          lable: "所学专业",
          placeholder: "请输入您的所学专业",
          key: "major",
          value: "",
          btn: false,
        },
      ],
      imgArr: [],
      experienceValue: "",
      apiType: "",
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    beforeRead(file) {
      this.imgArr = [...this.imgArr, ...file];
    },
    // 点击删除图片
    delImg(i) {
      this.imgArr.splice(i, 1);
    },
    imagePreviewFn(i) {
      ImagePreview({
        images: this.imagePreviewArr,
        startPosition: i,
      });
    },
    //点击完成了注册
    regEnd() {
      let postobj = {};
      this.inputArr.map((item) => {
        postobj = { ...postobj, [item.key]: item.value };
      });
      let idCard = this.imgArr.map((item) => item.file);
      const data = {
        ...postobj,
        idCard: idCard.join(","),
        experience: this.experienceValue,
      };

      api.apiRegister(data).then((res) => {
        if (res.code === 0) {
          this.$router.replace(`/nice-register-end?type=1`); //1 : 成功 ; 2 :已有账号
          return;
        } else if (res.code === 1) {
          if (res.state === 0) {
            //审核中
            Toast.fail(`审核中`);
          } else if (res.state === 1) {
            //失败
            Toast.fail(`失败`);
          } else {
            this.$router.replace(`/nice-register-end?type=2`); //1 : 成功 ; 2 :已有账号
          }
        }
      });
    },
    //根据类别使用接口
    showSelectPage(item) {
      this.apiType = item.key;
      item.btn ? (this.selectPageShow = true) : 1 + 1;
    },
    //城市, 学校搜索回调
    editSearch(value) {
      this.inputArr.find((v) => v.key === value.key).value = value.name;
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='scss' scoped>
.logo {
  margin: 20px auto;
}
input:disabled {
  color: #333;
  opacity: 1;
}
//IE8-
input[disabled] {
  color: #333;
  opacity: 1;
}
.reg_middle {
  padding: 20px 20px;
  .reg_middle_in_title {
    font-size: 12px;
    height: 28px;
    display: flex;
    align-items: center;
  }
  .reg_middle_in_input {
    height: 35px;
    width: 100%;
    padding-bottom: 5px;

    align-items: flex-end;
    .reg_middle_in_input_l {
      font-size: 16px;
      color: $grayColor;
      min-width: 80px;
    }
    .reg_middle_in_input_r {
      width: 100%;
      height: 100%;
      text-align: right;
      input {
        text-align: right;
      }
      .icon {
        transform: rotate(90deg);
      }
    }
  }
}
.reg_middle_img {
  font-size: 16px;
  color: $grayColor;
  padding: 40px 0px;
  padding-bottom: 0px;
  .reg_middle_img_updata {
    padding: 10px 0px;
    flex-wrap: wrap;
    .reg_middle_img_updata_in {
      width: 30%;
      height: 100px;
      margin-right: 4.5%;
      margin-bottom: 15px;
      &:nth-child(3n) {
        margin-right: 0%;
      }
    }
  }
  .reg_middle_img_subtitle {
    font-size: 10px;
    white-space: nowrap;
    span {
      transform: scale(0.7);
    }
  }
  ::v-deep .van-uploader__preview-delete-icon {
    color: #fff;
  }
  .reg_middle_bottom {
    widows: 100%;
    height: 186px;
    border: 1px solid rgba(130, 132, 130, 0.57);
    margin-top: 10px;
    textarea {
      width: 100%;
      height: 100%;
      padding: 15px 10px;
      color: #333;
      font-size: 18px;
    }
  }
}
.reg_middle_btn {
  margin-top: 20px;
  height: 54px;
}
</style>
